<template>
  <div class="Shopping-Cart-con">
    <IndexTop :c2="false" :c3="false"></IndexTop>
    <Shopping-Top :s2="false" :s3="false"></Shopping-Top>
    <div class="shoppingBox">
      <div class="shoppingBox-cont">
        <img src="../../assets/Shopping/购物车.png" alt="购物车" />
        <span>购物车</span>
      </div>
      <div class="shoppingCont">
        <div v-for="(item, index) in arr" v-bind:key="index">
          <div class="shoppingCon">
            <span class="shoppingCon-sp">
              <input
                type="checkbox"
                :ref="'all' + item.nameID"
                @click="chang(item.nameID, item)"
              />
              {{ item.name }}
            </span>
            <p class="shoppingCon-p">
              <span>{{ item.text }}</span>
              <span>{{ item.text1 }}</span>
              <span>{{ item.text2 }}</span>
              <span>{{ item.text3 }}</span>
              <span>{{ item.text4 }}</span>
            </p>
          </div>
          <div
            class="shoppingCt"
            v-for="(i, v) in item.cont"
            v-bind:key="v + 'aa'"
          >
            <div class="shopping-Ct">
              <input
                type="checkbox"
                :ref="'one' + item.nameID"
                @click="change(item.nameID, item)"
              />
              <img :src="i.urlimage" alt="" />
              <div>{{ i.name1 }}</div>
            </div>
            <div class="shopping-Con">
              <div>{{ i.name2 }}</div>
              <div>￥{{ i.name3 }}</div>
              <div class="box-sp">
                <el-input-number
                  size="small"
                  :min="1"
                  v-model="array[v]"
                  @input="price(item.nameID, item)"
                  >{{ array[v] }}</el-input-number
                >
              </div>
              <div>￥{{ i.name3 * array[v] }}</div>
              <div>
                <span class="boxSpan" @click="deleteRow(index, item.cont)">{{
                  i.name6
                }}</span>
              </div>
            </div>
          </div>
          <div
            class="totalPrice"
            v-for="(p, k) in item.price"
            v-bind:key="k + 'p'"
          >
            <span>{{ p.text }}</span>
            <span>￥{{ p.num }}</span>
          </div>
          <div class="kong"></div>
        </div>
      </div>

      <div class="total">
        <div class="total-left">
          <span class="total-left-Select" @click="SelectChange()">全选</span>
          <span class="total-left-delete">批量删除</span>
        </div>
        <div class="total-right">
          <span class="total-left-to">商品总计 :</span>
          <span class="total-left-price">￥{{ m }}</span>
          <router-link to="/Shoppingconfirm" class="total-left-go"
            >立即购买</router-link
          >
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import IndexTop from "../zfc/IndexTop";
import Footer from "../Footer";
import ShoppingTop from "./Shopping-Top";
export default {
  name: "Shopping-Cart-con",
  data() {
    return {
      arr: this.$store.state.arr,
      array: [1, 1, 1, 1],
      an: [false, false],
      count: 0,
      //   num: 0,
      m: 0,
    };
  },
  methods: {
    //  移除按钮
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 价格
    price(nameID) {
      console.log(nameID);
      var num = 0;
      for (var i = 0; i < this.$refs["one" + nameID].length; i++) {
        if (this.$refs["one" + nameID][i].checked == true) {
          num += this.array[i] * this.arr[0].cont[i].name3;
        }
      }
      console.log(num);
      this.$store.commit("setnum", { k: nameID, v: num });
      console.log(this.$store.state.arr[nameID].price[0].num);
    },
    //单选框
    change(nameID, item) {
      for (var i = 0; i < this.$refs["one" + nameID].length; i++) {
        if (this.$refs["one" + nameID][i].checked == true) {
          this.count += 1;
        }
      }
      if (this.count == this.$refs["one" + nameID].length) {
        this.$refs["all" + nameID][0].checked = true;
        this.an[nameID] = true;
        this.count = 0;
      } else {
        this.$refs["all" + nameID][0].checked = false;
        this.an[nameID] = false;
        this.count = 0;
      }
      this.price(nameID, item);
    },
    // 全选框
    chang(nameID, item) {
      this.an[nameID] = !this.an[nameID];
      for (var i = 0; i < this.$refs["one" + nameID].length; i++) {
        this.$refs["one" + nameID][i].checked = this.an[nameID];
      }
      this.price(nameID, item);
    },
  },

  mounted() {},
  components: {
    IndexTop,
    Footer,
    ShoppingTop,
  },
};
</script>
<style scoped>
.shoppingBox {
  width: 1280px;
  height: 100%;
  margin: 0 auto;
}
.shoppingBox-cont {
  width: 1280px;
  height: 60px;
}
.shoppingBox-cont img {
  width: 23px;
  height: 23px;
  margin-top: 18px;
}
.shoppingBox-cont span {
  display: inline-block;
  width: 55px;
  height: 20px;
  margin-left: 15px;
  font-size: 18px;
  vertical-align: top;
  margin-top: 18px;
}
.shoppingCont {
  width: 1280px;
  height: 100%;
}
.shoppingCon {
  width: 1280px;
  height: 47px;
  line-height: 47px;
  background-color: #f2f2f2;
  border: solid 1px #e9e9e9;
  display: flex;
  justify-content: space-between;
  color: #333;
}
.shoppingCon-sp {
  display: inline-block;
  width: 415px;
  height: 47px;
}
.shoppingCon-sp input {
  margin: 0 20px;
}
.shoppingCon-p {
  display: inline-block;
  width: 865px;
  height: 47px;
  display: flex;
  justify-content: space-around;
}
.shoppingCt {
  width: 1280px;
  height: 120px;
  /* line-height: 120px; */
  border-right: solid 1px #f2f2f2;
  border-bottom: solid 1px #f2f2f2;
  border-left: solid 1px #f2f2f2;
  display: flex;
  justify-content: space-between;
}
.shopping-Ct {
  display: inline-block;
  width: 415px;
  height: 120px;
  line-height: 120px;
  display: flex;
  justify-content: flex-start;
}
.shopping-Ct input {
  margin: 0 20px;
  margin-top: 50px;
}
.shopping-Ct img {
  width: 80px;
  height: 80px;
  border: solid 1px #ccc;
  margin-top: 20px;
}
.shopping-Ct div {
  margin-left: 20px;
  color: #666;
}
.shopping-Con {
  width: 865px;
  height: 120px;
  line-height: 120px;
  display: flex;
  justify-content: space-around;
}
.shopping-Con div:nth-child(1),
.shopping-Con div:nth-child(2) {
  width: 173px;
  height: 120px;
  text-align: center;
  color: #999;
}
.shopping-Con div:nth-child(4) {
  width: 173px;
  height: 120px;
  text-align: center;
  color: #333;
}
.shopping-Con div:nth-child(5) {
  width: 173px;
  height: 120px;
  text-align: center;
  color: #498e3d;
}
.box-sp {
  width: 173px;
  height: 75px;
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 45px;
}
.boxSpan {
  cursor: pointer;
}
.box {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border: solid 1px #d3d3d3;
  background-color: #f2f2f2;
  color: #999;
}
.box1 {
  width: 45px;
  height: 28px;
  line-height: 28px;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
}
.box2 {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border: solid 1px #d3d3d3;
  background-color: #f2f2f2;
  color: #999;
}
/* 总价 */
.totalPrice {
  width: 1280px;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: solid 1px #f2f2f2;
  display: flex;
  justify-content: flex-end;
}
.totalPrice span:nth-child(1) {
  color: #666;
  font-size: 18px;
  margin-right: 25px;
}
.totalPrice span:nth-child(2) {
  color: #ff8f8f;
  font-size: 24px;
  margin-right: 50px;
}
.kong {
  width: 1280px;
  height: 20px;
  /* border-left: 1px solid #f2f2f2;
    border-right: solid 1px #f2f2f2;
    border-bottom: 1px solid #f2f2f2; */
}
.total {
  width: 1280px;
  height: 130px;
  display: flex;
  justify-content: space-between;
}
.total-left {
  width: 170px;
  height: 130px;
  line-height: 130px;
  display: flex;
  justify-content: space-around;
}
.total-left-Select,
.total-left-delete {
  cursor: pointer;
}
.total-right {
  width: 350px;
  height: 130px;
  /* line-height: 130px; */
  display: flex;
  justify-content: space-between;
}
.total-left-to {
  height: 130px;
  line-height: 130px;
  font-size: 18px;
  color: #666666;
}
.total-left-price {
  height: 130px;
  line-height: 130px;
  font-size: 24px;
  color: #ff5757;
}
.total-left-go {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background-color: #f08200;
  border-radius: 10px;
  margin-top: 40px;
  cursor: pointer;
  text-decoration: none;
}
</style>
